<template>
  <div class="monitor-index">
    <a-space size="large">
      <a-card>
        <a-descriptions title="User Info" bordered :column="2" size="middle">
          <a-descriptions-item label="UserName"
            >Zhou Maomao</a-descriptions-item
          >
          <a-descriptions-item label="Telephone"
            >1810000000</a-descriptions-item
          >
          <a-descriptions-item label="Live"
            >Hangzhou, Zhejiang</a-descriptions-item
          >
          <a-descriptions-item label="Remark">empty</a-descriptions-item>
          <a-descriptions-item label="Address"
            >No. 18, Wantang Road, Xihu District</a-descriptions-item
          >
        </a-descriptions>
      </a-card>

      <a-card>
        <a-descriptions title="User Info" bordered :column="2" size="middle">
          <a-descriptions-item label="UserName"
            >Zhou Maomao</a-descriptions-item
          >
          <a-descriptions-item label="Telephone"
            >1810000000</a-descriptions-item
          >
          <a-descriptions-item label="Live"
            >Hangzhou, Zhejiang</a-descriptions-item
          >
          <a-descriptions-item label="Remark">empty</a-descriptions-item>
          <a-descriptions-item label="Address"
            >No. 18, Wantang Road, Xihu District</a-descriptions-item
          >
        </a-descriptions>
      </a-card>
    </a-space>
    <a-card>
      <a-space size="large" direction="vertical">
        <a-space size="middle">
          <div class="chart-container">
            <ECharts :option="options.option1" />
          </div>
          <div class="chart-container">
            <ECharts :option="options.option2" />
          </div>
        </a-space>
        <a-space size="middle">
          <div class="chart-container">
            <ECharts :option="options.option3" />
          </div>
          <div class="chart-container">
            <ECharts :option="options.option4" />
          </div>
        </a-space>
      </a-space>
    </a-card>
  </div>
</template>

<script setup>
import ECharts from "@components/ECharts/index.vue";
import options from "./options.js";
import { WebSocketClient } from "@utils/websocket.js";
import echartsOptions from "@utils/defaultChart.js";

// const ws = new WebSocketClient("ws://175.178.23.51:9090/api/monitor/ws");
// ws.ws.onmessage = () => {
//   ws.send("xxx");
// };
</script>

<style scoped lang="scss">
.monitor-index {
  width: 100%;
  height: 100%;
}
.chart-container {
  flex: 1;
  width: 100%;
  height: 200px;
}

.ant-space {
  display: flex;
}

:deep(.ant-space-item) {
  flex: 1;
}
</style>
